<template>
    <div v-if="curModule">
        <p class="lh30px f14px text-center">
            楼层{{curFloorIndex + 1}}
        </p>
        <div class="floor-module" style="width: 70%;">
            <div class="hot-area"
                 v-if="curModule.floorList[curFloorIndex].hotAreaBgImg">
                <img :src="curModule.floorList[curFloorIndex].hotAreaBgImg">

                <div class="link-area"
                     v-for="(item, index) in curModule.floorList[curFloorIndex].linkList"
                     :style="createStyle(item, index)"
                     @click="handleCurLink(index)">
                </div>
            </div>

            <div class="floor-title"
                 v-if="!(curModule.floorList[curFloorIndex].floorType == 'twoCol' &&
                 curModule.floorList[curFloorIndex].titleImgPosition == 'in') &&
                 curModule.floorList[curFloorIndex].titleImg">
                <img :src="curModule.floorList[curFloorIndex].titleImg">
            </div>

            <div class="goods-wrap" :style="{backgroundColor: pageBgColor}">
                <img v-if="curModule.floorList[curFloorIndex].floorType == 'simple'"
                     src="../../imgs/floor.png">
                <img v-if="curModule.floorList[curFloorIndex].floorType == 'slide'"
                     src="../../imgs/slide-floor.png">
                <img v-if="curModule.floorList[curFloorIndex].floorType == 'twoCol' && curModule.floorList[curFloorIndex].titleImgPosition == 'in'"
                     src="../../imgs/two-col-in.png">
                <img v-if="curModule.floorList[curFloorIndex].floorType == 'twoCol' && curModule.floorList[curFloorIndex].titleImgPosition == 'top'"
                     src="../../imgs/two-col-top.png">

                <template v-if="curModule.floorList[curFloorIndex].floorType == 'twoCol' && curModule.floorList[curFloorIndex].titleImgPosition == 'in'">
                    <div class="placeholder" v-if="!curModule.floorList[curFloorIndex].titleImg">
                        <i class="el-icon-picture-outline cm-text-light mb10px"
                           style="font-size: 36px; margin-top: 64px; display: block; vertical-align: middle">
                        </i>
                        <span class="f12px cm-text-light">
                            请输入楼层标题图url
                        </span>
                    </div>

                    <div class="title-img" v-else="">
                        <img :src="curModule.floorList[curFloorIndex].titleImg">
                    </div>
                </template>
            </div>
        </div>

        <p class="cm-text-red text-center mt10px">
            * 楼层中的商品仅为示意图
        </p>

        <!--编辑模块楼层-->
        <div v-show="editType == 1">
            <p class="f14px mb10px mt20px">模块{{curModuleIndex + 1}} - 楼层列表</p>

            <ul>
                <li v-for="(item, index) in curModule.floorList"
                    class="sub-list-item"
                    :class="{'sub-list-item-close': index != curFloorIndex}"
                    @click="handleCurFloor(index)">
                    <div class="title">
                        楼层{{index + 1}}
                    </div>

                    <table width="100%;" class="f14px">
                        <tr>
                            <td class="pb10px"
                                align="right"
                                width="75">
                                楼层名称：
                            </td>
                            <td class="pb10px">
                                <el-input
                                    placeholder="请输入楼层名称"
                                    v-model.trim="item.name"
                                    style="width: 274px;">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="pb10px"
                                align="right">
                                楼层类型：
                            </td>
                            <td class="pb10px">
                                <el-select
                                    placeholder="请选择楼层类型"
                                    v-model="item.floorType"
                                    @change="handleFloorChange"
                                    style="width: 274px;">
                                    <el-option
                                        v-for="(value, key) in dict.floorType"
                                        :key="key"
                                        :value="key"
                                        :label="value">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td class="pb10px"
                                align="right">
                                标题图片：
                            </td>
                            <td class="pb10px">
                                <el-input
                                    placeholder="请输入标题图片url"
                                    v-model.trim="item.titleImg"
                                    @change="handleFloorChange"
                                    style="width: 274px;">
                                </el-input>
                            </td>
                        </tr>
                        <tr v-show="item.floorType == 'twoCol'">
                            <td class="pb10px"
                                align="right">
                                标题位置：
                            </td>
                            <td class="pb10px">
                                <el-select
                                    placeholder="请选择标题位置"
                                    v-model="item.titleImgPosition"
                                    @change="handleFloorChange"
                                    style="width: 274px;">
                                    <el-option
                                        v-for="(value, key) in dict.titleImgPosition"
                                        :key="key"
                                        :value="key"
                                        :label="value">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td class="pb10px"
                                align="right">
                                活动类型：
                            </td>
                            <td class="pb10px">
                                <el-select
                                    v-model="item.activityType"
                                    placeholder="请选择活动类型"
                                    style="width: 274px;">
                                    <el-option
                                        v-for="(value, key) in dict.activityType"
                                        :key="key"
                                        :value="key"
                                        :label="value">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td class="pb10px"
                                align="right">
                                　活动ID：
                            </td>
                            <td class="pb10px">
                                <el-input
                                    v-model.trim="item.activityId"
                                    style="width: 274px;">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td class="pb5px"
                                colspan="2">
                                <el-button
                                    type="text"
                                    @click="handleEditTypeChange(2)">
                                    编辑楼层顶部热区
                                </el-button>
                            </td>
                        </tr>
                    </table>

                    <el-button
                        class="btn btn-up"
                        type="default"
                        icon="el-icon-arrow-up"
                        :disabled="index == 0"
                        v-show="index == curFloorIndex"
                        @click="handleUpFloor($event, index)">
                    </el-button>

                    <el-button
                        class="btn btn-down"
                        type="default"
                        icon="el-icon-arrow-down"
                        :disabled="index == curModule.floorList.length - 1"
                        v-show="index == curFloorIndex"
                        @click="handleDownFloor($event, index)">
                    </el-button>

                    <el-button
                        :disabled="curModule.floorList.length <= 1"
                        class="btn"
                        type="default"
                        icon="el-icon-delete"
                        @click="handleDelFloor($event, index)">
                    </el-button>
                </li>
            </ul>

            <el-button
                type="primary"
                icon="el-icon-plus"
                @click="handleAddFloor">
                添加楼层
            </el-button>
        </div>

        <!--编辑楼层顶部热区-->
        <div v-show="editType == 2">
            <div class="oh mb5px mt20px">
                <p class="f14px lh30px fl">
                    模块{{curModuleIndex + 1}} - 楼层{{curFloorIndex + 1}} - 楼层顶部热区
                </p>
                <el-button
                    type="text"
                    class="fr"
                    @click="handleEditTypeChange(1)">
                    返回编辑楼层
                </el-button>
            </div>

            <table style="width: 100%;" class="mt20px f14px">
                <tr>
                    <td class="lh30px">
                        热区底图：

                        <el-input
                            placeholder="请输入热区底图url"
                            v-model.trim="curModule.floorList[curFloorIndex].hotAreaBgImg"
                            @change="handleFloorChange"
                            style="width: 276px;">
                        </el-input>
                    </td>
                </tr>
            </table>

            <p class="f14px mb5px mt15px lh30px">
                热区链接列表
                <el-button
                    type="text"
                    style="vertical-align: top;"
                    @click="showIllustration">
                    查看链接配置说明
                    <i class="el-icon-question"></i>
                </el-button>
            </p>

            <ul>
                <li v-for="(item, index) in curFloorLinkList"
                    class="sub-list-item"
                    :class="{'sub-list-item-close': index != curLinkIndex}"
                    @click="handleCurLink(index)">
                    <div class="title">
                        <div class="color-block"
                             :style="{backgroundColor: colorList[index]}">
                        </div>
                        链接{{index + 1}}
                    </div>

                    <table width="100%" class="f14px">
                        <tr>
                            <td width="75"
                                align="right"
                                class="pb10px">
                                热区宽度：
                            </td>
                            <td class="pb10px">
                                <el-input
                                    placeholder="请输入"
                                    v-model.trim="item.width"
                                    style="width: 95px;">
                                </el-input>
                            </td>
                            <td width="75"
                                align="right"
                                class="pb10px">
                                热区高度：
                            </td>
                            <td class="pb10px">
                                <el-input
                                    placeholder="请输入"
                                    v-model.trim="item.height"
                                    style="width: 95px;">
                                </el-input>
                            </td>
                        </tr>
                        <tr>
                            <td align="right"
                                class="pb10px">
                                距离上边：
                            </td>
                            <td class="pb10px">
                                <el-input
                                    placeholder="请输入"
                                    v-model.trim="item.top"
                                    style="width: 95px;">
                                </el-input>
                            </td>
                            <td align="right"
                                class="pb10px">
                                距离左边：
                            </td>
                            <td class="pb10px">
                                <el-input
                                    placeholder="请输入"
                                    v-model.trim="item.left"
                                    style="width: 95px;">
                                </el-input>
                            </td>
                        </tr>
                    </table>
                    <table width="100%;" class="f14px">
                        <tr>
                            <td class="pb10px"
                                align="right"
                                width="75">
                                链接类型：
                            </td>
                            <td class="pb10px">
                                <el-select
                                    v-model="item.linkType"
                                    placeholder="请选择链接类型"
                                    style="width: 274px;"
                                    @change="handleLinkTypeChange">
                                    <el-option
                                        v-for="(value, key) in dict.linkType"
                                        v-if="key != 'floor'"
                                        :key="key"
                                        :value="key"
                                        :label="value">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr v-if="item.linkType &&
                            item.linkType != 'myCoupons' &&
                            item.linkType != 'pageTop' &&
                            item.linkType != 'modalClose' &&
                            item.linkType != 'newCart'">
                            <td class="pb10px"
                                align="right">
                                {{linkTypeValName[item.linkType]}}：
                            </td>
                            <td class="pb10px">
                                <el-select
                                    v-if="item.linkType == 'module'"
                                    :placeholder="'请选择' + linkTypeValName[item.linkType]"
                                    v-model="item.moduleIndex"
                                    style="width: 274px;">
                                    <el-option
                                        v-for="(module, moduleIndex) in moduleList"
                                        v-if="module.moduleType == 'simple'"
                                        :key="moduleIndex"
                                        :value="moduleIndex"
                                        :label="(moduleIndex + 1) + '. ' + dict.moduleType[module.moduleType]">
                                    </el-option>
                                </el-select>

                                <el-select
                                    v-else-if="item.linkType == 'modalOpen'"
                                    :placeholder="'请选择' + linkTypeValName[item.linkType]"
                                    v-model="item.modalIndex"
                                    style="width: 274px;">
                                    <el-option
                                        v-for="(module, moduleIndex) in moduleList"
                                        v-if="module.moduleType == 'modal'"
                                        :key="moduleIndex"
                                        :value="moduleIndex"
                                        :label="(moduleIndex + 1) + '. ' + dict.moduleType[module.moduleType]">
                                    </el-option>
                                </el-select>

                                <el-select
                                    v-else-if="item.linkType == 'smallProgram'"
                                    :placeholder="'请选择' + linkTypeValName[item.linkType]"
                                    v-model="item.targetSmallProgram"
                                    style="width: 274px;">
                                    <el-option
                                        v-for="(value, key) in dict.smallProgram"
                                        :key="key"
                                        :value="key"
                                        :label="value">
                                    </el-option>
                                </el-select>

                                <el-input
                                    v-else
                                    :placeholder="'请输入' + linkTypeValName[item.linkType]"
                                    v-model.trim="item.linkValue"
                                    style="width: 274px;">
                                </el-input>
                            </td>
                        </tr>
                        <tr v-if="item.linkType == 'smallProgram' && item.targetSmallProgram">
                            <td class="pb10px"
                                align="right">
                                跳转地址：
                            </td>
                            <td class="pb10px">
                                <el-input
                                    placeholder="请输入跳转地址"
                                    v-model.trim="item.linkValue"
                                    style="width: 274px;">
                                </el-input>
                            </td>
                        </tr>
                    </table>

                    <el-button
                        class="btn"
                        type="default"
                        icon="el-icon-delete"
                        @click="handleDelLink($event, index, item)">
                    </el-button>
                </li>
            </ul>

            <div class="no-data"
                 v-if="curFloorLinkList.length == 0">
                未添加任何链接
            </div>

            <el-button
                :disabled="curFloorLinkList.length >= 8"
                type="primary"
                icon="el-icon-plus"
                @click="handleAddLink">
                添加链接
            </el-button>
            <span class="cm-text-orange"
                  v-if="curModule.linkList.length >= 8">
            （最多8个链接，无法继续添加）
        </span>
        </div>
    </div>
</template>

<script>
    module.exports = {
        replace: true,
        props: ['pageBgColor', 'linkTypeValName', 'moduleList'],
        data () {
            return {
                curModule: null,
                curModuleIndex: 0,
                curFloorIndex: 0,
                curLinkIndex: 0,

                editType: 1, //1-编辑模块楼层，2-编辑楼层顶部热区

                colorList: [
                    '#e64d21',
                    '#1890FF',
                    '#2FC25B',
                    '#ff9f00',
                    '#422b00',
                    '#690ce0',
                    '#0410c7',
                    '#ff7bcc'
                ],

                initFlag: false
            };
        },
        computed: {
            dict () {
                return this.$store.state.dict.activityPage;
            },
            curFloorLinkList () {
                let _this = this;
                return _this.curModule.floorList[_this.curFloorIndex].linkList || [];
            }
        },
        methods: {
            setData (curModule, curModuleIndex, curFloorIndex) {
                var _this = this;
                _this.curModule = JSON.parse(JSON.stringify(curModule));
                _this.curModuleIndex = curModuleIndex;

                if (curFloorIndex !== undefined) {
                    _this.curFloorIndex = curFloorIndex;
                }

                _this.$nextTick(function () {
                    _this.initFlag = true;
                });
            },

            getData () {
                return JSON.parse(JSON.stringify(this.curModule));
            },

            handleAddFloor () {
                var _this = this;

                _this.curModule.floorList.push({
                    name: '',
                    floorType: 'simple',
                    titleImg: '',
                    titleImgPosition: 'top',
                    activityType: '',
                    activityId: '',
                    hotAreaBgImg: '',
                    linkList: []
                });

                _this.curFloorIndex = _this.curModule.floorList.length - 1;
                _this.$emit('moduleChange');
            },
            handleDelFloor (e, index) {
                e.stopPropagation();
                e.currentTarget.blur();
                var _this = this;

                if (index <= _this.curFloorIndex && _this.curFloorIndex != 0) {
                    _this.curFloorIndex--;
                }

                _this.curModule.floorList.splice(index, 1);
                _this.$emit('moduleChange', true);
            },
            handleUpFloor (e, index) {
                e.stopPropagation();
                e.currentTarget.blur();
                var _this = this,
                    targetFloor = _this.curModule.floorList.splice(index, 1)[0];

                _this.curModule.floorList.splice(index - 1, 0, targetFloor);

                _this.curFloorIndex--;
                _this.$emit('moduleChange', true);
            },
            handleDownFloor (e, index) {
                e.stopPropagation();
                e.currentTarget.blur();
                var _this = this,
                    targetFloor = _this.curModule.floorList.splice(index, 1)[0];

                _this.curModule.floorList.splice(index + 1, 0, targetFloor);

                _this.curFloorIndex++;
                _this.$emit('moduleChange', true);
            },
            handleCurFloor (index) {
                this.curFloorIndex = index;
            },
            handleFloorChange () {
                if (this.initFlag) {
                    this.$emit('moduleChange');
                }
            },

            handleEditTypeChange (type) {
                this.editType = type;
                this.curLinkIndex = 0;
            },

            showIllustration () {
                this.$emit('showIllustration');
            },

            handleAddLink () {
                var _this = this;

                _this.curFloorLinkList.push({
                    width: 200,
                    height: 100,
                    left: 0,
                    top: 0,
                    linkType: '',
                    linkValue: '',
                    moduleIndex: '',
                    floorIndex: '',
                    modalIndex: '',
                    targetSmallProgram: ''
                });

                _this.curLinkIndex = _this.curFloorLinkList.length - 1;
            },
            handleDelLink (e, index) {
                e.stopPropagation();
                var _this = this;

                if (index <= _this.curLinkIndex) {
                    //如果 当前编辑模块 在 删除模块 之前，要把 curModuleIndex 减去1 再删除模块，否则会引发报错
                    //因为删除模块后，当前编辑模块的 index 就比之前小 1 了
                    _this.curLinkIndex--;
                }

                _this.curFloorLinkList.splice(index, 1);
            },
            handleCurLink (index) {
                this.curLinkIndex = index;
            },
            createStyle (item, index) {
                var _this = this,
                    scale = 400 / 750;

                return {
                    width: (Math.floor(scale * item.width) || 0) + 'px',
                    height: (Math.floor(scale * item.height) || 0) + 'px',
                    left: (Math.floor(scale * item.left) || 0) + 'px',
                    top: (Math.floor(scale * item.top) || 0) + 'px',
                    backgroundColor: _this.curLinkIndex == index ? _this.colorList[index] : 'transparent',
                    opacity: _this.curLinkIndex == index ? 0.9 : 1,
                    border: _this.curLinkIndex == index ? 'none' : '1px solid ' + _this.colorList[index],
                    zIndex: _this.curLinkIndex == index ? 2 : 1
                };
            },

            handleLinkTypeChange () {
                var _this = this;

                if (!_this.initFlag) {
                    return;
                }

                var target = _this.curFloorLinkList[_this.curLinkIndex];

                target.linkValue = '';
                target.moduleIndex = '';
                target.floorIndex = '';
                target.modalIndex = '';
                target.targetSmallProgram = '';
            }
        }
    };
</script>
